22-avgust, 2025O'zbek

XML hujjatlariga stil berish uchun CSS nomlar fazosiga chuqur kirish, sintaksis, qo'llanilishi va veb-dasturchilar uchun eng yaxshi amaliyotlar.

CSS Nomlar Fazosi Qoidasi: XML-ni Aniq Stil Berish

Kaskadli uslublar jadvali (CSS) an'anaviy ravishda HTML hujjatlariga stil berish uchun ishlatiladi. Biroq, CSS XML (Extensible Markup Language) hujjatlariga ham qo'llanilishi mumkin. Bu erda CSS nomlar fazosi o'z rolini o'ynaydi va XML tuzilmasidagi o'ziga xos elementlarni ularning tegishli nomlar fazosiga asoslangan holda nishonga olish mexanizmini ta'minlaydi. CSS nomlar fazosini tushunish XHTML, SVG, MathML va boshqa XML-ga asoslangan texnologiyalar bilan ishlaydigan dasturchilar uchun juda muhimdir.

XML Nomlar Fazosi nima?

XML nomlar fazosi bitta XML hujjati ichida turli manbalardan olingan lug'atlarni aralashtirganda element nomlarining to'qnashuviga yo'l qo'ymaslik usulidir. Nomlar fazosi Uniform Resource Identifier (URI) bilan aniqlanadi, bu odatda URL manzilidir. URIning o'zi haqiqiy resursga ishora qilishi shart bo'lmasa-da, u nomlar fazosi uchun noyob identifikator bo'lib xizmat qiladi. Buni XML hujjatingiz ichida alohida "dunyo" yaratish usuli sifatida o'ylab ko'ring, bu erda elementlar noyob tarzda aniqlanadi.

HTML va Scalable Vector Graphics (SVG) ni o'z ichiga olgan hujjatni ko'rib chiqing. HTML va SVG ikkalasida ham <title> elementlari mavjud. Nomlar fazosiz, brauzer qaysi <title> elementiga uslublarni qo'llashni bilmaydi.

Mana XMLda nomlar fazosi qanday e'lon qilinishiga misol:


<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <title>Nomlar Fazosi bilan Hujjat</title>
  </head>
  <body>
    <h1>Salom Dunyo!</h1>
    <svg:svg width="100" height="100">
      <svg:circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg:svg>
  </body>
</html>

Ushbu misolda:

xmlns="http://www.w3.org/1999/xhtml" <html> elementi va uning barcha avlodlari uchun sukut bo'yicha nomlar fazosini e'lon qiladi (agar bekor qilinmasa). Bu shuni anglatadiki, <head>, <title>, <body> va <h1> kabi elementlar XHTML nomlar fazosiga tegishli.
xmlns:svg="http://www.w3.org/2000/svg" SVG nomlar fazosi uchun "svg" prefiksi bilan nomlar fazosini e'lon qiladi. <svg:svg> va <svg:circle> kabi elementlar SVG nomlar fazosiga tegishli.

CSS Nomlar Fazosi Qanday Ishlaydi

CSS nomlar fazosi uslublarni o'z nomlar fazosiga asoslangan elementlarga qo'llashga imkon beradi. Bunga CSS ichidagi @namespace qoidasi yordamida erishiladi. @namespace qoidasi nomlar fazosi prefiksini o'ziga xos nomlar fazosi URI bilan bog'laydi.

Asosiy sintaksis quyidagicha:


@namespace prefix "namespace-uri";

Qaerda:

prefix CSSda ishlatmoqchi bo'lgan nomlar fazosi prefiksidir.
"namespace-uri" nomlar fazosini aniqlaydigan URIdir.

Nomlar fazosi prefiksini e'lon qilganingizdan so'ng, undan CSS selektorlarida ushbu nomlar fazosiga tegishli elementlarni nishonga olish uchun foydalanishingiz mumkin.

CSS Nomlar Fazosini Qo'llash: Amaliy Misollar

1-misol: SVG Elementlariga Stil Berish

Aytaylik, avvalgi misoldagi SVG doirasiga stil bermoqchisiz. Quyidagi CSSdan foydalanishingiz mumkin:


@namespace svg "http://www.w3.org/2000/svg";

svg|circle {
  fill: red;
  stroke: blue;
  stroke-width: 5px;
}

Ushbu CSSda:

@namespace svg "http://www.w3.org/2000/svg"; SVG nomlar fazosini "svg" prefiksi bilan e'lon qiladi.
svg|circle - bu malakali nom selektori. Vertikal chiziq belgisi (|) nomlar fazosi prefiksini element nomidan ajratadi. Ushbu selektor SVG nomlar fazosidagi barcha <circle> elementlarini nishonga oladi.

Ushbu CSS doiraning to'ldirish rangini qizilga, chiziq rangini ko'kga va chiziq qalinligini 5 pikselga o'zgartiradi.

2-misol: Sukut bo'yicha Nomlar Fazosi bilan XHTML Elementlariga Stil Berish

XML hujjatida sukut bo'yicha nomlar fazosi bo'lsa (ildiz elementida prefikssiz e'lon qilingan), CSS yordamida ushbu nomlar fazosidagi elementlarni nishonga olishingiz mumkin. Nomlar fazosi prefiksini belgilashingiz va keyin nomlar fazosi prefiksi bilan universal selektorni (*) ishlatishingiz kerak.

Avvalgi misoldagi XHTML tuzilmasini ko'rib chiqing. <h1> elementiga stil berish uchun quyidagi CSSdan foydalanishingiz mumkin:


@namespace xhtml "http://www.w3.org/1999/xhtml";

xhtml|h1 {
  color: green;
  font-size: 2em;
}

Ushbu CSSda:

@namespace xhtml "http://www.w3.org/1999/xhtml"; XHTML nomlar fazosini "xhtml" prefiksi bilan e'lon qiladi.
xhtml|h1 XHTML nomlar fazosidagi <h1> elementini nishonga oladi.

Ushbu CSS <h1> elementining rangini yashilga va shrift o'lchamini 2em ga o'zgartiradi.

3-misol: Bir nechta Nomlar Fazosidan Foydalanish

CSSda bir nechta nomlar fazosini belgilashingiz mumkin, shunda bitta hujjat ichida turli lug'atlardan olingan elementlarga stil berasiz.

XHTML va MathMLni birlashtirgan XML hujjatini ko'rib chiqing:


<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:mathml="http://www.w3.org/1998/Math/MathML">
  <head>
    <title>Bir nechta Nomlar Fazosi bilan Hujjat</title>
  </head>
  <body>
    <h1>MathML Misol</h1>
    <mathml:math>
      <mathml:mrow>
        <mathml:mi>x</mathml:mi>
        <mathml:mo>+</mathml:mo>
        <mathml:mi>y</mathml:mi>
      </mathml:mrow>
    </mathml:math>
  </body>
</html>

<h1> elementiga (XHTML) va <math> elementiga (MathML) stil berish uchun quyidagi CSSdan foydalanishingiz mumkin:


@namespace xhtml "http://www.w3.org/1999/xhtml";
@namespace mathml "http://www.w3.org/1998/Math/MathML";

xhtml|h1 {
  color: blue;
}

mathml|math {
  font-size: 1.5em;
}

Ushbu CSS <h1> elementini ko'k rangda stil beradi va <math> elementining shrift o'lchamini oshiradi.

Brauzer Mosligi

CSS nomlar fazosini qo'llab-quvvatlash odatda zamonaviy brauzerlarda yaxshi. Biroq, eski brauzerlar cheklangan yoki umuman qo'llab-quvvatlamasligi mumkin. Moslikni ta'minlash uchun CSSni turli brauzerlar bilan sinab ko'rish muhimdir.

Mana brauzerlarni qo'llab-quvvatlashning umumiy ko'rinishi:

Chrome: To'liq qo'llab-quvvatlash
Firefox: To'liq qo'llab-quvvatlash
Safari: To'liq qo'llab-quvvatlash
Edge: To'liq qo'llab-quvvatlash
Internet Explorer: Cheklangan qo'llab-quvvatlash (IE9+ ba'zi bir o'zgarishlar bilan)

Internet Explorerning eski versiyalari uchun shartli izohlar yoki muqobil stil berish usullaridan foydalanishingiz kerak bo'lishi mumkin.

CSS Nomlar Fazosidan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar

CSSning yuqori qismida nomlar fazosini e'lon qiling: Bu sizning CSSni o'qilishi va xizmat ko'rsatilishi osonroq qiladi.
Ma'noli prefikslardan foydalaning: Tegishli nomlar fazosini aniq ko'rsatadigan prefikslarni tanlang (masalan, SVG uchun "svg", XHTML uchun "xhtml").
Prefiksdan foydalanishda izchil bo'ling: Nomlar fazosi uchun prefiksni tanlaganingizdan so'ng, undan CSSda izchil foydalaning.
Turli brauzerlarda sinovdan o'tkazing: CSS barcha maqsadli brauzerlarda kutilganidek ishlashini ta'minlang.
CSS qayta tiklashdan foydalanishni o'ylab ko'ring: Uslublarni qayta tiklash turli brauzerlarda, ayniqsa XML hujjatlari bilan ishlashda izchil stil berishni ta'minlashga yordam beradi.
Barcha nomlangan elementlar uchun malakali nomlardan (prefix|element) foydalaning: Ba'zi brauzerlar sukut bo'yicha nomlar fazosidagi elementlarga prefikssiz stil berishga imkon bersa-da, aniqlik va izchillik uchun har doim malakali nomlardan foydalanish eng yaxshi amaliyotdir.

Universal Nomlar Fazosi Selektori

Universal nomlar fazosi selektori, bitta yulduzcha (*) bilan ifodalanadi, elementlarni ularning nomlar fazosidan qat'i nazar, nishonga olish uchun ishlatilishi mumkin. Bu ba'zi hollarda foydali bo'lishi mumkin, ammo ehtiyotkorlik bilan ishlatilishi kerak, chunki u kutilmagan stilga olib kelishi mumkin.

Masalan, *|h1 o'z nomlar fazosidan qat'i nazar, har qanday <h1> elementini nishonga oladi.

`default` Nomlar Fazosidan Foydalanish

CSS 4-darajasi sukut bo'yicha nomlar fazosini belgilash uchun `default` kalit so'zini taqdim etadi. Bu asosiy nomlar fazosi sukut bo'yicha bo'lgan hujjatlar bilan ishlashda yanada qisqacha stil berishga imkon beradi.

Sintaksis:


@namespace default "http://www.w3.org/1999/xhtml";

default|h1 {
 color: red;
}

Biroq, ushbu xususiyatni brauzerlar tomonidan qo'llab-quvvatlash hali ham rivojlanmoqda.

Muqobil Stil Berish Yondashuvlari

CSS nomlar fazosi XML hujjatlariga stil berishning tavsiya etilgan usuli bo'lsa-da, siz eski brauzerlarni qo'llab-quvvatlashingiz yoki murakkab stil berish talablariga ega bo'lishingiz kerak bo'lsa, muqobil yondashuvlarni ko'rib chiqishingiz mumkin.

JavaScript: Elementlarning nomlar fazosiga asoslangan holda uslublarni dinamik ravishda qo'shish yoki o'zgartirish uchun JavaScriptdan foydalanishingiz mumkin. Bu ko'proq moslashuvchanlikni ta'minlaydi, lekin u ham murakkabroq bo'lishi mumkin.
XSLT: Extensible Stylesheet Language Transformations (XSLT) XML hujjatlarini HTML yoki boshqa formatlarga aylantirish uchun ishlatilishi mumkin, bu esa standart CSS yordamida aylantirilgan natijaga stil berishga imkon beradi.

Umumiy Xatolar

Nomlar fazosini e'lon qilishni unutish: Agar siz @namespace yordamida nomlar fazosini e'lon qilmasangiz, CSS qoidalaringiz mo'ljallangan elementlarga qo'llanilmaydi.
Noto'g'ri nomlar fazosi URIsidan foydalanish: Har bir lug'at uchun to'g'ri nomlar fazosi URI dan foydalaning.
Nomlar fazosi prefikslarini chalkashtirib yuborish: Chalkashlikni oldini olish uchun turli nomlar fazosi uchun turli prefikslardan foydalaning.
Brauzer mosligini e'tiborsiz qoldirish: Kutilganidek ishlashini ta'minlash uchun CSSni turli brauzerlarda sinab ko'ring.
Haddan tashqari o'ziga xos selektorlar: CSSni xizmat ko'rsatishni qiyinlashtiradigan haddan tashqari o'ziga xos selektorlardan foydalanishdan saqlaning.

Xulosa

CSS nomlar fazosi XML hujjatlariga stil berishning kuchli va moslashuvchan usulini ta'minlaydi. Nomlar fazosi qanday ishlashini va ularni CSSda qanday ishlatishni tushunib, siz murakkab XMLga asoslangan ilovalar uchun yaxshi tuzilgan va xizmat ko'rsatiladigan uslublar jadvallarini yaratishingiz mumkin. Brauzer mosligi odatda yaxshi bo'lsa-da, izchil foydalanuvchi tajribasini ta'minlash uchun CSSni turli brauzerlarda sinab ko'rish muhimdir. Eng yaxshi amaliyotlarga rioya qilib va umumiy xatolardan qochib, siz vizual jihatdan jozibali va funktsional XMLga asoslangan veb-ilovalar yaratish uchun CSS nomlar fazosining kuchidan foydalanishingiz mumkin.

CSSni tartibli saqlashni, ma'noli prefikslardan foydalanishni va har doim kodingizni yaxshilab sinab ko'rishni unutmang. CSS nomlar fazosini yaxshi tushunib, siz har qanday XML stil berish muammosini ishonch bilan hal qilishingiz mumkin.